<template>
  <div id="basic-form-con" class="g-treeform-page">
    <g-banner title="左树右表单" des="左边为树图，右边为表单的页面"></g-banner>
    <a-affix :target="getScrollingCon">
      <div class="g-title-con">
        <h2 class="g-main-title pull-left">左树右表单</h2>
        <div class="g-title-button pull-right">
          <el-button type="primary">保存</el-button>
          <el-button @click="handleSubmit" type="primary">提交</el-button>
          <el-button>返回</el-button>
        </div>
        <div class="clearfix"></div>
      </div>
    </a-affix>
    <right-menu :menuVisible="menuVisible" ref="rm">
      <li class="menu-item"><i class="el-icon-plus" type="primary"></i>新增同级节点</li>
      <li class="menu-item"><i class="el-icon-caret-bottom" type="primary"></i>新增下级节点</li>
      <li class="menu-item"><i class="el-icon-caret-bottom" type="primary"></i>编辑标题</li>
      <li class="line"></li>
      <li class="menu-item"><i class="el-icon-delete-solid" type="danger"></i>删除节点</li>
    </right-menu>
    <div class="tree-con g-box">
      <div class="g-tree-title">
        <h3>全部分类(23)</h3>
        <i class="el-icon-plus"></i>
        <div class="clearfix"></div>
      </div>
      <el-tree :data="treeData" @node-click="handleNodeClick" ref="tree" @node-contextmenu="showRightMenu">
        <span slot-scope="{ node }">
          <i class="el-icon-tickets" v-if="node.isLeaf"></i>
          <i class="el-icon-folder" v-else></i>
          <span>{{node.label}}</span>
        </span>
      </el-tree>
    </div>
    <div class="table-con g-box">
      <el-form :model="meeting" label-width="120px" class="g-form-large" :rules="formRules" ref="form">
        <el-form-item label="会议名称" prop="meetingName">
          <el-input v-model="meeting.meetingName" placeholder="请输入会议名称" class="g-input-width-large"></el-input>
        </el-form-item>
        <el-form-item label="会议内容" prop="meetingContent">
          <el-input v-model="meeting.meetingContent" placeholder="请输入会议内容" class="g-input-width-large"></el-input>
        </el-form-item>
        <el-form-item label="起止时间" prop="meetingDuration">
          <el-date-picker v-model="meeting.meetingDuration.meetingStart" type="datetime" placeholder="请输入开始时间" style="width: 170px;"></el-date-picker>
          <span style="margin: 0 10px;">至</span>
          <el-date-picker v-model="meeting.meetingDuration.meetingEnd" type="datetime" placeholder="请输入结束时间" style="width: 170px;"></el-date-picker>
        </el-form-item>
        <el-form-item label="会议地点" prop="meetingSite">
          <el-select v-model="meeting.meetingSite" placeholder="请输入会议地点" class="g-input-width-large">
            <el-option value="601" label="601"></el-option>
            <el-option value="604" label="604"></el-option>
            <el-option value="605" label="605"></el-option>
            <el-option value="608" label="608"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="参会者" prop="meetingParticipant">
          <el-select v-model="meeting.meetingParticipant" placeholder="请选择参会者" class="g-input-width-large" multiple>
            <el-option value="赵先生" label="赵先生"></el-option>
            <el-option value="钱先生" label="钱先生"></el-option>
            <el-option value="孙女士" label="孙女士"></el-option>
            <el-option value="李先生" label="李先生"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="视频支持" prop="meetingVideo">
          <el-radio :label="true" v-model="meeting.meetingVideo">需要</el-radio>
          <el-radio :label="false" v-model="meeting.meetingVideo">不需要</el-radio>
        </el-form-item>
        <el-form-item label="主要行业应用" prop="industry">
          <el-select v-model="industry" placeholder="请选择分类" class="g-input-width-large">
            <el-option value="0" label="政府行业"></el-option>
            <el-option value="1" label="医疗行业"></el-option>
          </el-select>
          <el-checkbox-group v-model="meeting.industry" style="margin-top: 10px" class="g-checkbox">
            <el-checkbox label="市场监管" border class="label"></el-checkbox>
            <el-checkbox label="应急管理" border class="label"></el-checkbox>
            <el-checkbox label="自然资源" border class="label"></el-checkbox>
            <el-checkbox label="党政民生" border class="label"></el-checkbox>
            <el-checkbox label="空间大数据" border class="label"></el-checkbox>
            <el-checkbox label="人工智能" border class="label"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="收款账户" prop="receiptAccount">
          <el-input placeholder="请输入收款账户" v-model="meeting.receiptAccount" class="g-input-width-large g-input-prepend">
            <el-select v-model="wayRecipt" slot="prepend" placeholder="收款方式">
              <el-option label="微信" value="0"></el-option>
              <el-option label="支付宝" value="1"></el-option>
            </el-select>
          </el-input>
        </el-form-item>
        <el-form-item label="紧急程度" prop="urgencyLevel">
          <el-radio v-model="meeting.urgencyLevel" label="0">
            <el-tag size="small" type="danger">紧急</el-tag>
          </el-radio>
          <el-radio v-model="meeting.urgencyLevel" label="1">
            <el-tag size="small" type="primary">急</el-tag>
          </el-radio>
          <el-radio v-model="meeting.urgencyLevel" label="2">
            <el-tag size="small" type="success">一般</el-tag>
          </el-radio>
        </el-form-item>
        <el-form-item label="地区" prop="region">
          <el-cascader v-model="meeting.region" :options="regionOptions" class="g-input-width-large"></el-cascader>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { regionOptions } from '@/data/data'
import { getScrollingCon } from '@/util/common'
import { treeData } from '../test-data'
import RightMenu from '@/components/right-menu'
export default {
  data() {
    return {
      menuVisible: false,
      treeData,
      meeting: {
        meetingName: '',
        meetingContent: '',
        meetingDuration: {
          meetingStart: '',
          meetingEnd: '',
        },
        meetingSite: '',
        meetingParticipant: [],
        meetingVideo: true,
        industry: [],
        receiptAccount: '',
        accountType: '',
        urgencyLevel: '0',
        region: null
      },
      industry: null,
      wayRecipt: '1',
      regionOptions,
      formRules: {
        meetingName: [
          { required: true, message: '请输入会议名称', trigger: 'blur' }
        ],
        meetingContent: [
          { required: true, message: '请输入会议内容', trigger: 'blur' }
        ],
        meetingDuration: [
          { 
            validator: (rule, value, cb) => value.meetingStart == '' || value.meetingEnd == ''?cb(new Error()):cb(), 
            message: '请输入起止时间', 
            trigger: 'blur',
          }
        ],
        region: [
          { required: true, message: '请选择地区', trigger: 'blur' }
        ]
      }
    }
  },
  components: {
    RightMenu
  },
  methods: {
    getScrollingCon,
    handleNodeClick(value) {

    },
    showRightMenu(event, object, node, element) {
      this.treeNode = object
      this.$refs.rm.handleShow(event)
    },
    handleSubmit() {
      this.$refs.form.validate((isValid) => {
        if (isValid) {
          this.$message.success('提交成功')
        } else {
          this.$message.warning('请检查表单项')
          return false
        }
      })
    },
  },
}
</script>